<template>
  <div class="yoga-app">
    <!-- 页面头部 -->
    <icon-arrow-left
      @click="goBack"
      size="50"
      style="position: fixed; top: 3vw; left: 3vw; z-index: 999; color: white"
    />
    <a-row
      type="flex"
      justify="center"
      align="middle"
      class="header"
      style="height: 200px; background-color: #d8a4e6"
    >
      <a-col span="12">
        <h1>58个<br />轻松有趣的瑜伽方式</h1>
      </a-col>
      <a-col span="12">
        <!-- <img src="path-to-your-image.jpg" alt="Yoga Image" /> -->
      </a-col>
    </a-row>

    <!-- 瑜伽课程列表 -->
    <a-list bordered :data="yogaCourses" class="courses">
      <template #item="{ item }">
        <a-list-item :key="item.id">
          <a-list-item-meta>
            <template #avatar>
              <a-avatar shape="square" size="large">
                <img alt="avatar" :src="item.avatar" />
              </a-avatar>
            </template>
            <template #title>{{ item.title }}</template>
            <template #description>{{ item.duration }}秒</template>
          </a-list-item-meta>
          <template v-if="item.completed">
            <a-button
              type="primary"
              @click="startCourse(item)"
              shape="round"
              disabled
              :style="{ marginLeft: '40%' }"
              >开始练习</a-button
            >
          </template>
          <template v-else>
            <a-button
              type="primary"
              @click="startCourse(item)"
              shape="round"
              :style="{ marginLeft: '40%' }"
              >开始练习</a-button
            >
          </template>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
// 假设这是你的瑜伽课程数据
const yogaCourses = ref([
  {
    id: 1,
    avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    title: '第一节：花环式',
    duration: 300, // 5分钟转换为秒
    completed: true,
  },
  {
    id: 2,
    avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    title: '第二节：鸽子式',
    duration: 30, // 已经是秒
    completed: false,
  },
  {
    id: 1,
    avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    title: '第一节：花环式',
    duration: 300, // 5分钟转换为秒
    completed: true,
  },
  {
    id: 2,
    avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    title: '第二节：鸽子式',
    duration: 30, // 已经是秒
    completed: false,
  },
  // 更多课程...
])
const goBack = () => {
  router.go(-1)
}

const router = useRouter()

function startCourse(course) {
  console.log(`Starting course: ${course.title}`)
  // 导航到课程详情页
  router.push({
    name: 'chapterdetails',
    params: {
      chapterlist: JSON.stringify(course),
    },
  })
}
</script>

<style scoped>
.yoga-app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 页面头部样式 */
.yoga-app .header {
  background-color: #d8a4e6;
  color: white;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* 瑜伽课程列表样式 */
.yoga-app .courses {
  flex-grow: 1;
  overflow-y: auto;
}

/* 其他自定义样式可以根据需要添加 */
</style>
